<template>
  <div class="modal-container">
    <!-- 橱窗产品选择弹窗 -->

    <el-dialog
      :title="id ? '选择新闻' : '选择新闻'"
      width="1200px"
      custom-class="modal-record"
      :close-on-click-modal="false"
      :visible.sync="show"
      :before-close="onModalClose"
    >
      <div class="modal-inner">
        <div class="modal-ctx" v-loading="loading">
          <div class="action-box">
            <div class="action-left">
              <div class="filter-item">
                <!-- <el-cascader clearable :show-all-levels="false" :props="cateProps" v-model="searchCate" :options="listCate" @change="handleChangeCate" placeholder="选择分类"></el-cascader> -->

                <formSelect
                  :form="searchControl.searchCate.form"
                  :item="searchControl.searchCate.option"
                  @eventCallback="eventCallback"
                  ref="formSelect"
                />
              </div>

              <div class="filter-item">
                <el-input clearable type="text" v-model="keyword" placeholder="关键字">
                </el-input>
              </div>
              <div class="filter-item">
                <el-button size="small" type="primary" @click="to_search()"
                  >搜索</el-button
                >
              </div>
              <div class="filter-item">
                <el-button size="small" type="warning" @click="to_reset()"
                  >重置</el-button
                >
              </div>
            </div>

            <div class="action-right">
              <el-button size="small" type="primary" @click="form_submit()"
                >确认选择</el-button
              >
            </div>
          </div>

          <div class="table-box">
            <el-table
              ref="multipleTable"
              :data="newsList"
              fit
              stripe
              border
              highlight-current-row
              min-width="100px"
              style="width: 100%"
              @selection-change="handleSelectionChange1"
            >
              <el-table-column type="selection" width="40"> </el-table-column>
              <!-- 数据循环体 -->

              <template v-for="(item, index) in tableColumns">
                <el-table-column
                  v-if="item.type == 'image'"
                  :key="index + item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  :sortable="item.custom"
                  :show-overflow-tooltip="item.show_overflow_tooltip"
                >
                  <template slot-scope="scope">
                    <div class="table-image-list">
                      <template v-if="item.colFormat == 'jsonObjectArray'">
                        <div
                          class="table-image-item"
                          v-for="(sub, subindex) in scope.row[item.prop]"
                          :key="subindex"
                        >
                          <!-- <img :src="item.image" alt="" /> -->
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="sub.url"
                            :preview-src-list="scope.row[item.prop].map((v) => v.url)"
                          >
                          </el-image>
                        </div>
                      </template>
                      <template v-else>
                        <div class="table-image-item">
                          <!-- <img :src="item.image" alt="" /> -->
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row[item.prop]"
                            :preview-src-list="[scope.row[item.prop]]"
                          >
                          </el-image>
                        </div>
                      </template>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  v-else
                  :key="index + item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  :sortable="item.custom"
                  :show-overflow-tooltip="item.show_overflow_tooltip"
                >
                </el-table-column>
              </template>

              <!-- 数据循环体 -->

              <el-table-column fixed="right" label="操作" width="50px">
                <template slot-scope="scope">
                  <el-link type="primary" @click="product_choose(scope.row)"
                    >选择</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- v-if="false" -->
          <div class="pagination-box">
            <div class="page-left">
              <el-checkbox v-model="checkedAll" @change="changeAll">全选</el-checkbox>
            </div>
            <div class="page-right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="form_submit">确认</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import formSelect from "@/components/form/formSelect.vue";
import { mapState } from "vuex";

export default {
  name: "modal-hetong",
  components: {
    formSelect,
  },
  props: [""],
  data() {
    return {
      show: false,
      loading: false,
      id: "",

      // 产品列表
      list_product: [],

      // 分类搜索
      cateProps: {
        checkStrictly: true,
        value: "id",
        label: "categoryName",
        children: "childList",
      },
      searchCate: [],
      listCate: [],
      // 分类搜索

      keyword: "",
      checkedAll: false,

      level1Cates: [],
      level2Cates: [],
      level3Cates: [],

      // 新闻选择
      params: {},
      newsList: [],
      tableColumns: [
        {
          prop: "newsTitle",
          label: "标题",
          width: "auto",
          sortable: false, //是否可排序
          show_overflow_tooltip: false, //悬浮是否展示提示
        },
        {
          prop: "newsCover",
          label: "图片",
          width: "auto",
          sortable: false,
          type: "image",
          colFormat: "jsonObjectArray",
        },
        {
          prop: "channelName",
          label: "所属分类",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },
        // {
        //   prop: "newsType",
        //   label: "新闻类型",
        //   width: "auto",
        //   sortable: false,
        //   show_overflow_tooltip: false,
        // },
        {
          prop: "keyWords",
          label: "关键字",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },

        {
          prop: "createTime",
          label: "发布时间",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: true,
        },
      ],

      searchControl: {
        searchCate: {
          show: true,
          form: {
            channelId: "",
          },
          option: {
            is_required: 1,
            col: "channelId",
            label: "所属分类",
            val: "",
            width: "100",
            type: "select",
            labelKey: "channelName",
            valueKey: "channelId",
            apiConfig: {
              url: "/app/system/newsChannel/list",
              method: "get",
              data: {
                page: 1,
                pageNum: 100,
              },
            },
          },
        },
      },

      targetId: "",
      otherQueryParams: {},
      pagination: {
        page: 1,
        pageSize: 10,
      },
      count: 0,
    };
  },
  computed: {},
  watch: {
    show(val) {
      if (!val) {
        this.searchCate = "";
        this.list_product = [];
        this.keyword = "";
        this.pagination = {
          page: 1,
          pagesize: 10,
        };
        // this.listCate = [];
      }
    },
  },

  created() {},

  methods: {
    eventCallback(option) {
      let {
        // 来源
        // 是否需要刷新
        from,
        reflush,
      } = option;

      if (reflush) {
        this.setView();
      }

      console.warn("事件回调 option", JSON.parse(JSON.stringify(option)));
    },

    init(option) {
      let {
        //
        targetId,
        otherQueryParams,
      } = option;

      this.targetId = targetId;
      this.otherQueryParams = otherQueryParams;

      this.show = true;
      this.setView();
    },

    setView() {
      this.$api({
        url: "/app/news/information/list",
        method: "get",
        data: {
          ...this.pagination,
          ...this.otherQueryParams,
          newsTitle: this.keyword,
          channelId: this.searchControl.searchCate.form.channelId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let dataList = res.rows;

          let colFormatItem = this.tableColumns.find((v) => v.colFormat);
          if (colFormatItem) {
            if (colFormatItem.colFormat == "jsonObjectArray") {
              dataList.forEach((v) => {
                if (v[colFormatItem.prop]) {
                  try {
                    v[colFormatItem.prop] = JSON.parse(v[colFormatItem.prop]);
                  } catch (error) {
                    v[colFormatItem.prop] = [];
                  }
                } else {
                  v[colFormatItem.prop] = [];
                }
                // console.warn("表格行", { ...v });
              });
            }
          }

          this.newsList = dataList;
          this.count = res.total;
        }
      });
    },

    //产品全选
    changeAll(val) {
      console.log("全选", val);
      if (val) {
        // let items = this.list_product;
        // this.toggleSelection(items);
        // this.$refs.multipleTable.toggleRowSelection(items, true);
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange1(items) {
      console.log("已选项目", JSON.parse(JSON.stringify(items)));
      this.select_items = items;
    },
    to_search() {
      this.setView();
    },
    to_reset() {
      this.searchControl.searchCate.form.channelId = "";
      this.keyword = "";
      this.setView();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.pagination.pagesize = val;
      this.setView();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.pageNum = val;
      this.setView();
    },

    //产品分类选择
    handleChangeCate(value) {
      console.log("handleChangeCate", value);
      // this.queryProduct();
    },

    product_choose(item) {
      console.log("产品选择", { ...item });
    },

    onModalClose() {
      this.show = false;
    },

    //产品选择
    async form_submit() {
      console.warn("已勾选项目", JSON.parse(JSON.stringify(this.select_items)));
      if (!this.select_items.length) {
        alertErr("请选择相关信息");
        return;
      }

      // return;
      let ids = this.select_items.map((v) => v.newsId);
      ids = JSON.stringify(ids);

      //newsContent
      //newsTopic
      let routeName = this.$route.name;
      let res = null;
      if (routeName == "newsContent") {
        //新闻-相关新闻
        res = await this.$api({
          url: "/app/news/information",
          method: "put",
          data: {
            newsId: this.targetId,
            relatedNewsId: ids,
          },
        });
      } else if (routeName == "newsTopic") {
        //话题-相关新闻
        res = await this.$api({
          url: "/app/news/topic",
          method: "put",
          data: {
            topicId: this.targetId,
            relatedNewsId: ids,
          },
        });
      }

      if (res) {
        alert(res);
        if (res.code == 200) {
          this.show = false;
          this.$parent.setView();
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
/deep/ .el-dialog {
  margin-top: 3vh !important;
}

.pagination-box {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.cate-poster {
  width: 30px;
  height: 30px;
}

/deep/ .el-table__cell {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.table-box {
  height: 500px;
  overflow-y: auto;
}
.el-cascader {
  width: 100%;
}

.action-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .action-left {
    display: flex;
    align-items: center;

    .filter-item {
      margin-right: 20px;
    }
  }
  .action-right {
  }
}

.input-box-margin {
  padding: 10px;

  &:nth-child(2n) {
    background: #f9f9f9;
  }

  .label {
    padding-top: 0 !important;
  }
}

.section-title {
  padding: 10px 10px;
  background: #eee;
  display: flex;
  align-items: center;

  .title-text {
    margin-right: 30px;
  }

  /deep/ .el-checkbox {
    margin-bottom: 0;
  }
}

.section-ctx {
  // margin-bottom: 30px;
  // padding: 10px 25px;
  // border: 1px solid #eee;

  &:last-child {
    margin-bottom: 10px;
  }
}

.fapiao-info {
  padding: 0 40px;
  .item {
    margin-bottom: 20px;
    display: flex;
    // justify-content: space-between;
    align-items: center;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.tip-box {
  margin-top: 10px;
  font-size: 12px;
  color: #888;
}

/deep/ .modal-record {
  // margin-top: 80px !important;

  .modal-inner {
    padding: 10px;
    padding-bottom: 0 !important;
  }

  .el-dialog__header {
    .flex-between();
    border-bottom: 1px solid #eee;
    // background: #90caf8;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;

    .el-dialog__title {
      color: #000;
    }
    .el-dialog__headerbtn {
      // display: none;
      // top: 0;
      .el-dialog__close {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    // text-align: center;

    button {
      // width: 106px;
      // height: 40px;
      // background: #fff;
      // opacity: 1;
      // border-radius: 0;
      // border: 1px solid #aaa;
      // cursor: pointer;

      & + button {
        margin-left: 30px;
      }
    }

    .queding {
      // background: #036dd1;
      // border: 1px solid #aaa;
      // color: #fff;
      // width: 106px;
      // height: 40px;
      // background: #0060fa;
    }
  }
}

.modal-ctx {
  padding: 0;

  .action-box {
    text-align: left;
  }

  .tip {
    margin-bottom: 20px;
    color: #444;
    font-size: 14px;
  }

  .input-box {
    margin-bottom: 15px;

    &.flex {
      display: flex;
      align-items: flex-start;

      .label {
        margin-bottom: 0;
        text-align: left;
        padding-top: 5px;
      }
    }

    .label {
      min-width: 100px;
      margin-right: 20px;
      margin-bottom: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      color: #6e7285;
    }

    .input-item {
      text-align: left;
      width: 600px;
    }

    .el-input {
      min-width: 300px;
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}

.upload-ctx {
  margin: 20px 0;
}
</style>
